import {Component} from '@angular/core';
import {RouterLink, RouterLinkActive} from "@angular/router";
import {NgClass} from "@angular/common";

@Component({
  selector: 'app-header',
  standalone: true,
  imports: [
    RouterLink,
    NgClass,
    RouterLinkActive
  ],
  templateUrl: './header.component.html',
  styleUrl: './header.component.scss'
})
export class HeaderComponent {
  mobileMenuOpen = false;
  mobileSubMenuOpen = false;

  toggleMenu() {
    this.mobileMenuOpen = !this.mobileMenuOpen;
    if (!this.mobileMenuOpen) {
      this.mobileSubMenuOpen = false;
    }
  }

  subMenushow() {
    const subMenus: any = document.querySelector('.sub-menu');
    // console.log(getComputedStyle(subMenus).display);
    // 只有屏幕大小小于lg的情况下才能点击
    if (getComputedStyle(subMenus).display !== 'flex') {
      this.mobileSubMenuOpen = !this.mobileSubMenuOpen;
    }

  }

  closeMenu() {
    this.mobileMenuOpen = false;
  }

}
